<template>
  <div class="zh-campus-partition">
    <nav-header>
      <!-- <div class="zh-h5-nav">
				<div
					:class="activePanel === 'campus-partition' ? 'active' : ''"
					@click="changePanel('campus-partition')">校园分区</div>
				<div
					:class="activePanel === 'classroom-management' ? 'active' : ''"
					@click="changePanel('classroom-management')">教室管理</div>
			</div> -->
    </nav-header>
    <transition
      name="fade"
      mode="out-in"
      v-if="activePanel === 'campus-partition'"
    >
      <div class="zh-table">
        <div class="zh-table-open clear">
          <div class="zh-open-left fl">
            <div class="open-width">
              <el-input
                v-model="keyword"
                placeholder="教室名称"
                @keyup.enter.native="searchFunc"
              ></el-input>
            </div>
            <el-button type="primary" @click="searchFunc">搜索</el-button>
            <el-button type="primary" @click="getData">重置</el-button>
          </div>
          <div class="zh-open-right fr">
            <el-button type="primary" @click="addClick('top')"
              >添加顶级</el-button
            >
          </div>
        </div>
        <div class="frame-manage">
          <ul class="frame-list">
            <li>
              <div class="ellips">序号</div>
            </li>
            <li>
              <div class="ellips">分区名称</div>
            </li>
            <li>
              <div class="ellips">是否教室</div>
            </li>
            <li>
              <div class="ellips">备注</div>
            </li>
            <li>
              <div class="ellips">操作</div>
            </li>
          </ul>
          <el-tree
            :data="orgData"
            node-key="id"
            default-expand-all
            :expand-on-click-node="true"
          >
            <div class="custom-tree-node" slot-scope="{ node, data }">
              <ul class="frame-list">
                <li style="width: 50px">
                  <div class="ellips">{{ orgData[0].inx++ }}</div>
                </li>
                <li style="width: 300px">
                  <div class="ellips">
                    <span v-show="node.level >= 2" class="gap"></span>
                    {{ data.name }}
                  </div>
                </li>
                <li>
                  <div class="ellips">{{ data.type_name }}</div>
                </li>
                <li>
                  <div class="ellips">{{ data.comment }}</div>
                </li>
                <li>
                  <div class="ellips">
                    <el-button
                      type="text"
                      size="mini"
                      v-if="parseInt(data.status) === 2"
                      @click.stop="changeStatus(data, 1)"
                    >
                      已禁用
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      v-if="parseInt(data.status) === 1"
                      @click.stop="changeStatus(data, 2)"
                    >
                      已启用
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      @click.stop="addClick(data)"
                    >
                      添加同级
                    </el-button>
                    <el-button
                      v-if="parseInt(data.level) === 1"
                      type="text"
                      size="mini"
                      @click.stop="addClickSub(data)"
                    >
                      添加子级
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      @click.stop="editClick(data)"
                    >
                      编辑
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      class="delete-button"
                      @click.stop="deleteInspection(data)"
                    >
                      删除
                    </el-button>
                  </div>
                </li>
              </ul>
            </div>
          </el-tree>
        </div>
      </div>
    </transition>

    <transition
      name="fade"
      mode="out-in"
      v-if="activePanel === 'classroom-management'"
    >
      <zh-classroom-management />
    </transition>

    <!-- 添加/编辑校园分区 -->
    <el-dialog
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :title="title"
      :visible.sync="addClass"
      class="addClass"
      width="550px"
    >
      <el-form
        :model="addForm"
        ref="addForm"
        :rules="rules"
        status-icon
        label-position="right"
        label-width="125px"
      >
        <el-form-item label="校园分区名称：" prop="name">
          <el-input
            v-model="addForm.name"
            placeholder="20 个字符内"
            maxLength="20"
            autocomplete="off"
            clearable
          >
          </el-input>
        </el-form-item>
        <el-form-item label="是否教室：">
          <el-radio v-model="addForm.type" label="1">是</el-radio>
          <el-radio v-model="addForm.type" label="0">否</el-radio>
        </el-form-item>
        <!-- <el-form-item label="评课角色：">
                    <el-button v-for="item in roleTypeData " @click="checkUsers(item.id)" :key="item.id">{{item.name}}</el-button>
                    <el-checkbox-group v-model="checkedUserData" @change="getUserVal($event, roleId)">
                        <el-checkbox v-for="user in pushData" :label="user" :key="user.id">{{user.name}}</el-checkbox>
                    </el-checkbox-group>
            </el-form-item> -->
        <el-form-item label="备注：">
          <el-input
            type="textarea"
            :rows="6"
            maxLength="140"
            placeholder="可输入该校园分区备注"
            v-model="addForm.comment"
          >
          </el-input>
          <div class="remarkNum">
            {{ addForm.comment.length }} / <span>140</span>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addClass = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ARR: [],
      roleId: "",
      userIds: "",
      checkRoles: [],
      roleTypeData: [],
      pushData: [],
      checkedUserData: [],
      activePanel: "campus-partition",
      keyword: null,
      orgData: [],
      status_arr: {
        1: "启用",
        2: "禁用"
      },
      addClass: false,
      addForm: {
        app_code: sessionStorage.getItem("CheckSchoolAppCode"),
        id: 0,
        name: "",
        pid: 0,
        type: "0",
        comment: "",
        u_data: []
      },
      rules: {
        name: [
          {
            validator: this.validateContent,
            trigger: "blur",
            required: true
          },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "change"
          }
          // {
          //     pattern: this.rules.chinese.reg,
          //     message: this.rules.chinese.msg,
          //     trigger: 'blur'
          // }
        ]
      },
      title: "",
      treeConfig: {}
    };
  },
  created() {
    this.toggleView();
    this.getData();
  },
  watch: {
    $route() {
      this.toggleView();
    },
    addClass() {
      if (this.addClass === false) this.$refs.addForm.resetFields();
    }
  },
  methods: {
    // getRole() {
    //     let success = ( data => {
    //         this.roleTypeData = data.data;
    //     })

    //     let fail = ( data => {
    //         this.$message.error(data.msg);
    //     })
    //     this.$ajax.get('api/role/role', {params:{is_have_me:1}, func: {success: success, fail: fail}});
    // },
    // getUserList(id){
    //     let success = ( data => {
    //         // console.log(data.data)
    //         this.pushData = data.data
    //     });
    //     let fail = ( data => {
    //         this.$message.error(data.msg)
    //     })
    //     let params = {
    //         role_id: id,
    //     }
    //     this.$ajax.get('api/user/user',{params, func:{success:success}})
    // },
    // checkUsers(id) {
    //     this.roleId = id
    //     this.getUserList(id)
    // },
    // getUserVal(val, roleId) {
    //     // console.log(val, roleId)
    //     this.ARR = []
    //     for(let i=0 ;i< val.length;i++) {
    //             if( i >= 1 && val[i].role_id == val[i-1].role_id ){
    //                 continue
    //             }

    //         let arr = [val[i].id]

    //         for(let j=i+1 ;j< val.length;j++ ){
    //             val[i].role_id == val[j].role_id && arr.push(val[j].id)
    //         }
    //         this.ARR.push(arr.toString())
    //     }
    //     console.log(this.ARR, 234)
    // },
    changePanel(panel) {
      this.activePanel = panel;
      if (this.activePanel === "campus-partition") {
        this.getData();
      }
    },
    changeStatus(obj, status) {
      let yes = data => {
        let success = data => {
          this.$message.success(data.msg);
          this.getData();
        };
        this.$ajax.post(
          "api/school/inspection_status",
          {
            id: obj.id,
            status: status
          },
          {
            func: {
              success: success
            }
          }
        );
      };
      let cancel = data => {};
      this.e_confirm({
        yes: yes,
        cancel: cancel,
        txt: "确定将 " + obj.name + " " + this.status_arr[status] + "吗？"
      });
    },
    deleteInspection(obj) {
      let yes = data => {
        let success = data => {
          this.$message.success(data.msg);
          this.getData();
        };
        this.$ajax.delete("api/school/inspection", {
          params: {
            id: obj.id
          },
          func: {
            success: success
          }
        });
      };
      let cancel = data => {};
      this.e_confirm({
        yes: yes,
        cancel: cancel,
        txt: "删除分区对应绑定的设备也会被删除，确定继续？"
      });
    },
    saveInspection() {
      let success = data => {
        this.addClass = false;
        this.$message.success(data.msg);
        this.getData();
      };
      if (parseInt(this.addForm.id) > 0) {
        this.$ajax.put("api/school/inspection", this.addForm, {
          func: {
            success: success
          }
        });
      } else {
        this.$ajax.post("api/school/inspection", this.addForm, {
          func: {
            success: success
          }
        });
      }
    },
    submitForm() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          this.saveInspection();
        } else {
          return false;
        }
      });
    },
    addClick(obj) {
      if (is_empty(obj)) {
        obj = {};
        obj.pid = 0;
      }
      this.title = "添加同级";
      if (obj == "top") {
        this.title = "添加顶级";
        obj = {};
        obj.pid = 0;
      }
      this.addForm.id = 0;
      this.addForm.name = "";
      this.addForm.pid = obj.pid;
      this.addForm.type = "0";
      this.addForm.comment = "";
      this.addClass = true;
    },
    addClickSub(obj) {
      this.title = "添加子级";
      this.addForm.id = 0;
      this.addForm.name = "";
      this.addForm.pid = obj.id;
      this.addForm.type = "0";
      this.addForm.comment = "";
      this.addClass = true;
    },
    editClick(obj) {
      this.title = "编辑";
      this.addForm.id = obj.id;
      this.addForm.name = obj.name;
      this.addForm.pid = obj.pid;
      this.addForm.type = obj.type.toString();
      this.addForm.comment = obj.comment;
      // console.log(this.addForm.comment.length)
      this.addClass = true;
    },
    // 验证
    validateContent(rule, value, callback) {
      if (value === "") {
        return callback(new Error("请输入校园分区名称"));
      } else if (!validateName(value)) {
        return callback(new Error("不能输入空格符号"));
      } else {
        callback();
      }
    },
    getData() {
      this.orgData = [];
      // 重写成功回调
      let success = data => {
        this.keyword = null;
        this.orgData = data.data;
        if (this.orgData.length > 0) {
          this.orgData[0].inx = 1;
        }
        this.$forceUpdate(); //强制渲染
      };

      this.$ajax.get("api/school/inspection_data", {
        func: {
          success: success
        }
      });
    },
    searchFunc() {
      this.orgData = [];
      // 重写成功回调
      let success = data => {
        this.orgData = data.data;
        if (this.orgData.length > 0) {
          this.orgData[0].inx = 1;
        }
        this.$forceUpdate(); //强制渲染
      };

      this.$ajax.get("api/school/inspection_data", {
        params: {
          keyword: this.keyword
        },
        func: {
          success: success
        }
      });
    },
    campusRoute() {
      this.$router.push("/affairs/inspection/campus-partition");
    },
    classroomRoute() {
      this.$router.push(
        "/affairs/inspection/campus-partition/classroom-management"
      );
    },
    //记录导航状态
    toggleView() {
      this.view = this.$route.name;
    }
  }
};
</script>
<style lang="scss">
.zh-campus-partition {
  .el-table__body-wrapper table tbody {
    td:nth-child(5),
    td:nth-child(6) {
      padding: 0;
    }
  }

  .el-tree-node__expand-icon {
    display: inline-block !important;
    position: absolute;
    left: 130px;
  }

  .remarkNum {
    position: absolute;
    right: 9px;
    bottom: -7px;

    span {
      color: #ccc;
    }
  }

  .frame-manage {
    margin: 25px 0;

    .frame-list {
      display: flex;
      height: 40px;
      line-height: 40px;
      background: #ddd;
      color: #000;
      text-align: center;

      li {
        flex: 1;
        box-sizing: border-box;

        &:nth-of-type(1) {
          flex: 0 0 50px;
        }

        &:nth-of-type(3) {
          flex: 0 0 80px;
        }

        &:nth-of-type(4) {
          padding: 0 15px;
        }
      }
    }

    .custom-tree-node {
      width: 100%;
      .frame-list {
        display: flex;
        justify-content: flex-start;
        height: auto;
        border-bottom: 1px solid #ddd;
        background: none;

        > li > div {
          display: flex;
          align-items: center;
          height: 100%;
        }

        > li:not(:nth-child(2)) > div {
          justify-content: center;
        }

        > li:nth-child(4) > div {
          word-wrap: break-word;
          white-space: pre-wrap;
        }

        li {
          position: relative;
          border-left: 1px solid #ddd;
          &:last-child {
            border-right: 1px solid #ddd;
          }
        }
        img {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .el-tree-node__content {
      padding-left: 0 !important;
      height: auto;
    }
    .el-tree-node__content {
      li:nth-of-type(2) .ellips {
        text-align: left;
        padding-left: 100px;
        .creat-btn {
          margin-right: -5px;
        }
        .gap {
          display: inline-block;
          width: 25px;
        }
      }
    }
  }
}
</style>
